<script setup>
// v-model:作用：值的双向绑定
/*
vue2  v-model
   <son :value='appValue'  @input="appValue=$event"  />
   <son v-model='appValue'    />
   son.vue
     props:{
      value:{..}
     }
     this.$emit('input',实参)

vue3  v-model:可以理解成v-model与.sync结合体
   vue3没有.sync
<son :xxx="appValue" @update:xxx="appValue=$event"    />
<son v-model:xxx="appValue"    />
   xxx===modelValue它是可以省略的
<son v-model="appValue"     />
son.vue
   defineProps({
       xxx:{...}
   })
   const emits=defineEmits(['update:xxx'])
   emits('update:xxx',实参值)

vue3 v-model与vue2相对：vue3内的一个组件可以用多个v-model
*/
import { ref } from 'vue'
import HmSon3 from './components/HmSon3.vue'
const money = ref(1000)
</script>

<template>
  <div class="app-page">
    <h3>我是父组件</h3>
    <HmSon3 :modelValue="money" @update:modelValue="money = $event"></HmSon3>
    <HmSon3 v-model:modelValue="money"></HmSon3>
    <HmSon3 v-model="money"></HmSon3>
  </div>
</template>

<style scoped></style>
